<template>
  <div id="app">
    <router-view></router-view>
   <TabBar>
     <tab-bar-item  path="/home" data-avtive="0">
      <img slot="item-icon" src="./assets/img/home.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/home-active.svg" alt="">
      <div slot="item-text">首页</div>
     </tab-bar-item>
     <tab-bar-item path="/kebao" data-avtive="1"> 
      <img slot="item-icon" src="./assets/img/kebao.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/kebao-active.svg" alt="">
      <div slot="item-text">课包</div>
     </tab-bar-item>
     <tab-bar-item  path="/class" data-avtive="2">
      <img slot="item-icon" src="./assets/img/class.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/class-active.svg" alt="">
      <div slot="item-text">班级</div>
     </tab-bar-item>
     <tab-bar-item  path="/profile" data-avtive="3">
      <img slot="item-icon" src="./assets/img/profile.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/profile-active.svg" alt="">
      <div slot="item-text">我的</div>
     </tab-bar-item>
   </TabBar>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld' 
import TabBar from '@/components/tabbar/tabbar' 
import TabBarItem from '@/components/tabbar/tabbaritem' 
import Tabbar from './components/tabbar/tabbar.vue'

export default {
  name: 'App',
  components: {
    TabBar,
    TabBarItem
  }
}
</script>
<style>
  @import "assets/css/base.css";
</style>